<!DOCTYPE HTML>
<html manifest='/res/etc/manifest.cache'>
<head>
<title>Markdown编辑器</title>
<meta name='referrer' content='always'/>
<link rel='shortcut icon' href='/favicon.ico'/>
<meta name='keywords' content='MARKDOWN在线编辑器'/>
<meta name='description' content='MARKDOWN在线编辑器'/>
<meta http-equiv='x-ua-compatible' content='ie=edge,chrome=1'/>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<meta name='viewport' content='width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'/>

<link rel='stylesheet' type='text/css' href='/app/workspace/css/base.css'/>
<link rel='stylesheet' type='text/css' href='/res/lib/codemirror/lib/codemirror.css'/>
<link rel='stylesheet' type='text/css' href='/res/lib/codemirror/addon/fold/foldgutter.css'/>

<script>
if (typeof(require) == 'function') delete window.module;
</script>

<script src='/res/lib/utils.js.gzip'></script>
<script src='/res/lib/laydate/laydate.js.gzip'></script>
<script src='/res/lib/highlight/highlight.js.gzip'></script>

<script src='/res/lib/codemirror/lib/codemirror.js.gzip'></script>
<script src='/res/lib/codemirror/addon/fold/foldcode.js'></script>
<script src='/res/lib/codemirror/addon/fold/foldgutter.js'></script>
<script src='/res/lib/codemirror/addon/fold/brace-fold.js'></script>
<script src='/res/lib/codemirror/mode/markdown/markdown.js'></script>
<script src='/res/lib/codemirror/addon/fold/indent-fold.js'></script>
<script src='/res/lib/codemirror/addon/fold/comment-fold.js'></script>
<script src='/res/lib/codemirror/addon/edit/matchbrackets.js'></script>

<style>
#SideDiv{
	float: left;
	width: 700px;
	height: 100%;
	position: absolute;
	overflow-y: hidden;
}
#ViewDiv{
	right: 0px;
	left: 700px;
	height: 100%;
	float: right;
	overflow: auto;
	position: absolute;
	background: rgba(255, 255, 255, 0.6);
}
#DragDiv{
	width: 3px;
	float: right;
	height: 100%;
	cursor: col-resize;
}
#MoveBar{
	width: 3px;
	opacity: 0.5;
	z-index: 100;
	background: #666;
	cursor: col-resize;
	position: absolute;
}
#CodeDiv{
	float: left;
	width: 697px;
	height: 100%;
}
#ContentDiv{
	padding: 4px 8px;
}
.CodeMirror{
	background: rgba(255, 255, 255, 0.85);
}
.CodeMirror-gutters{
	background: rgba(255, 255, 255, 0.95);
}
</style>
<script>
$(document).ready(function(){
	var drag = false;
	var view = $('#ViewDiv');
	var side = getStorage('markdown_side_size');

    setMarkedOptions({
		highlight: function(code){
			return hljs.highlightAuto(code).value;
		}
	});
	
	function upateView(pos){
		var width = getClientWidth();

		pos = parseInt(pos);

		if (pos < 100) pos = 100;
		if (pos + 100 > width) pos = width - 100;

		view.css('left', pos + 3);
		$('#CodeDiv').css('width', pos);
		$('#SideDiv').css('width', pos + 3);

		setStorage('markdown_side_size', pos);
	}

	$('#DragDiv').mousedown(function(e){
		e.preventDefault();
		drag = true;
		var bar = $('<div>', {
			id: 'MoveBar',
			css: {
				top: view.offset().top,
				left: view.offset().left - 2,
				height: view.outerHeight()				
			}
		}).appendTo('body');

		$(document).mousemove(function(e){
			bar.css('left', e.pageX);
		});
	});

	$(document).mouseup(function(e){
		if (drag){
			$(document).unbind('mousemove');
			$('#MoveBar').remove();
			upateView(e.pageX);
			drag = false;
		}
	});
	
	var code = CodeMirror.fromTextArea(document.getElementById('CodeText'), {
		mode: 'markdown',
		tabSize: 4,
		indentUnit: 4,
		inputStyle: 'textarea',
		foldGutter: true,
		lineNumbers: true,
		lineWrapping: true,
		matchBrackets: true,
		indentWithTabs: true,
		styleActiveLine: true,
		showCursorWhenSelecting: true,
		gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
	});

	code.setSize('100%','100%');
	
	if (side && side > 0){
		upateView(side);
	}

	var div = $('#ContentDiv');
	var source = getStorage('compile_markdown');

	if (strlen(source) == 0){
		source = getHttpResult('/app/compile/pub/markdown.etc');
	}

	code.setValue(source);
	div.html(markdown(source));

	setInterval(function(){
		var msg = code.getValue();
		if (msg != source){
			setStorage('compile_markdown', source = msg);
			div.html(markdown(source));
		}
	}, 100);
});
</script>
</head>
<body>
	<div id='SideDiv'>
		<div id='CodeDiv'>
			<textarea id='CodeText'></textarea>
		</div>
		<div id='DragDiv'></div>
	</div>
	<div id='ViewDiv'>
		<div id='ContentDiv'></div>
	</div>
</body>
</html>